<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getSMSCode, login, getTeacherById } from '/api/provide'
import { aesEncrypt } from '/utils/tools'
import { token, userInfo } from "/stores/user";

const formData = reactive({
	account: uni.getStorageSync('account') || '',
	password: '',
	code: '',
})
const rules = {
	account: {
		rules: [
			{ required: true, errorMessage: '请输入手机号' }
		]
	},
	password: {
		rules: [
			{ required: true, errorMessage: '请输入密码' }
		]
	},
	code: {
		rules: [
			{ required: true, errorMessage: '请输入验证码' },
		]
	}
}

const code = ref({})
getSMSCode().then(res => {
	code.value = res
})

async function getCode() {
	uni.showLoading()
	code.value = await getSMSCode()
	uni.hideLoading()
}

const isAgree = ref(false)
const form = ref()
async function submit() {
	await form.value.validate()
	if (!isAgree.value) {
		const { confirm } = await uni.showModal({
			title: '温馨提示',
			content: '请先阅读并同意《用户服务协议》《隐私政策》',
			confirmText: '同意',
			cancelText: '不同意',
		})
		if (!confirm) return
		isAgree.value = true
	}
	uni.showLoading()
	const res = await login({
		account: formData.account,
		password: aesEncrypt(formData.password),
		code: formData.code,
		uuid: code.value.uuid
	})
	uni.setStorageSync('account', formData.account)
	token.value = res.data.token
	const info = await getTeacherById()
	userInfo.value = info?.data || {}
	uni.hideLoading()
	await uni.switchTab({
		url: '/pages/home/index'
	})
	uni.showToast({
		title: '登录成功',
		icon: 'none',
	})
}
</script>

<template>
	<view class="T_page" :style="`padding-top:${uni.$statusBarHeight}px`">
		<view class="logo">
			<image src="/static/img/logo-1.png" />
			<view>慧科领航培训平台</view>
		</view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item name="account" :label-width="0">
				<uni-easyinput type="text" v-model="formData.account" placeholder="请输入手机号" v-bind="uni.$easyinput_attrs">
					<template #left>
						<image class="prefixIcon" src="/static/svg/account.svg" />
					</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="password" :label-width="0">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" v-bind="uni.$easyinput_attrs">
					<template #left>
						<image class="prefixIcon" src="/static/svg/password.svg" />
					</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="code" :label-width="0">
				<view class="code">
					<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" v-bind="uni.$easyinput_attrs">
						<template #left>
							<image class="prefixIcon" src="/static/svg/keyCode.svg" />
						</template>
					</uni-easyinput>
					<image class="code-img" :src="`data:image/jpeg;base64,${code.img}`" mode="aspectFit" @click="getCode" />
				</view>
			</uni-forms-item>
		</uni-forms>
		<button class="submit" type="primary" @click="submit">登录</button>
		<view class="agreement">
			<view @click="isAgree = !isAgree">
				<uni-icons type="checkbox-filled" :size="uni.$rpxToPx(32)" color="#2563EB" v-if="isAgree" />
				<uni-icons type="circle" :size="uni.$rpxToPx(32)" color="#9CA3AF" v-else />
				<text>我已阅读并同意</text>
			</view>
			<text @click="uni.navigateTo({ url: '/pages/userAgreement/index' })">《用户服务协议》</text>
			<text @click="uni.navigateTo({ url: '/pages/privacyPolicy/index' })">《隐私政策》</text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.T_page:deep() {
	.uni-easyinput__content {
		border-radius: 80rpx;
		background: #f5f5ff !important;
	}

	.uni-easyinput__content-input {
		height: 84rpx;
		padding-left: 0 !important;
		font-size: 25rpx;

		.content-clear-icon {
			padding: 0 28rpx 0 0;
		}
	}
}

.T_page {
	padding: 0 40rpx;
	background-color: #fff;

	>.logo {
		padding: 200rpx 0 60rpx;

		>image {
			display: block;
			margin: auto;
			width: 168rpx;
			height: 168rpx;
		}

		>view {
			text-align: center;
			padding-top: 30rpx;
			font-size: 35rpx;
			font-weight: 500;
			line-height: 49rpx;
			color: #1F2937;
		}
	}

	.prefixIcon {
		width: 28rpx;
		height: 28rpx;
		margin: 0 28rpx;
	}

	.submit {
		margin-top: 100rpx;
	}
}

.code {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 20rpx;

	.code-img {
		width: 220rpx;
		height: 100%;
		background-color: #f5f5ff;
	}
}

.agreement {
	display: flex;
	align-items: center;
	padding: 30rpx 0;

	>view {
		display: flex;
		align-items: center;
		gap: 6rpx;

		text {
			font-size: 24rpx;
			color: #6B7280;
		}
	}

	text {
		font-size: 24rpx;
		color: #2563EB;
	}
}
</style>
